<template>
  <div>
    <page-title title="已发起评审/订单详情" home-path="/sale/home"></page-title>
    <div class="pageMain">
      <div class="pageMain-body" style="height: calc(100vh - 125px);">
        <!-- <el-card> -->
        <el-button-group style="display: flex; justify-content: center; margin-bottom: 20px;padding-top: 10px;">
          <el-button :type="activeTab === 'details' ? 'primary' : ''" size="small"
            @click="setActiveTab('details')">详情</el-button>
          <el-button :type="activeTab === 'workflow' ? 'primary' : ''" size="small"
            @click="setActiveTab('workflow')">流程</el-button>
        </el-button-group>
        <div v-if="activeTab == 'details'">
          <detail-and-progress :form-data="orderInfo" :order-details="orderDetails" :suggest="suggestion"></detail-and-progress>
        </div>
        <div v-else>
          <Process :process-form="processForm"></Process>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/PageTitle.vue";
import OrderDetail from "@/components/OrderDetail.vue";
import detailAndProgress from "@/components/detailAndProgress.vue";
import Process from "@/components/Process.vue";
import { post } from "@/lib/Util.js";

import {
  getReviewedLeftList,
  viewAttachments,
  getDirectorOpinion,
  getReviewerOpinion,
  technologicalProcessData
} from "@/lib/Api.js";
export default {
  components: { PageTitle, OrderDetail, Process, detailAndProgress },
  data() {
    return {
      activeTab: "details",
      orderInfo: {},
      gridData: [],
      orderDetails: {},
      suggestion: {},
      id: "",
      processForm: {
        sale: "",
        standard: "",
        center: "",
        standardDepartment: "",
        file: ""
      }
    };
  },
  created() {
    this.id = this.$route.params.id;
  },
  mounted() {
    this.getInfo();
    this.getDirectorsOpinion();
    this.getReviewersOpinion();
  },
  methods: {
    //切换按钮
    setActiveTab(tab) {
      this.activeTab = tab; // 设置当前活动的标签
      if (tab == "workflow") {
        this.getWorkFlowData();
      }
    },
    getInfo() {
      let data = {
        contractInfoId: this.id
      };
      post(getReviewedLeftList, data).then(resp => {
        if (resp.code == 200) {
          this.orderInfo = resp.data;
        }
      });
    },
    //获取主任意见信息
    getDirectorsOpinion() {
      let data = {
        id: this.id
      };
      post(getDirectorOpinion, data).then(res => {
        if (res.code == 200) {
          this.suggestion = res.data;
        }
      });
    },
    //获取评审人员意见
    getReviewersOpinion() {
      let data = {
        id: this.id
      };
      post(getReviewerOpinion, data).then(res => {
        if (res.code == 200) {
          this.orderDetails = res.data;
        }
      });
    },
    getWorkFlowData() {
      let data = {
        contractInfoId: this.id
      };
      post(technologicalProcessData, data).then(res => {
        if (res.code === 200) {
          this.processForm = res.data;
          this.processForm.sale = res.data.flowInfoList.find(
            item => item.sequenceNo === 1
          );
          this.processForm.standard = res.data.flowInfoList.find(
            item => item.sequenceNo === 2
          );
          this.processForm.center = res.data.flowInfoList.find(
            item => item.sequenceNo === 3
          );
          this.processForm.standardDepartment = res.data.flowInfoList.find(
            item => item.sequenceNo === 4
          );
          this.processForm.file = res.data.flowInfoList.find(
            item => item.sequenceNo === 5
          );
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: stretch;
}

.uTable {
  width: 100%;

  td {
    &:first-child {
      width: 200px;
    }
  }
}

.left-half,
.right-half {
  flex: 1;
  padding: 10px;
  margin-top: 30px;
}

.vertical-line {
  width: 2px;
  background-color: #ccc;
  margin: 0 10px;
}
</style>
